<!--
 * new page
 * @author: YK
 * @since: 2024-01-12
 * index.vue
-->
<template>
  <div class="container">
    <div style="margin-right: 20px">
      <el-date-picker
        v-model="startDate"
        type="date"
        :placeholder="startPlaceholder"
        :size="size"
        :disabledDate="disabledStartDate"
        @change="handleStartChange"
        v-bind="$attrs.startOptions"
      />
    </div>
    <div>
      <el-date-picker
        v-model="endDate"
        type="date"
        :placeholder="endPlaceholder"
        :size="size"
        :disabled="endDateDisabled"
        @change="handleEndChange"
        :disabledDate="disabledEndDate"
        v-bind="$attrs.endOptions"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
const props = withDefaults(
  defineProps<{
    startPlaceholder?: string; // 开始时间占位符
    endPlaceholder?: string; // 结束时间占位符
    size?: "default" | "large" | "small"; // 尺寸
    endDateTodaay?: boolean; //是否禁用选择今天之前的日期
  }>(),
  {
    startPlaceholder: "开始日期",
    endPlaceholder: "结束日期",
    size: "default",
    endDateTodaay: true,
  }
);
let emits = defineEmits<{
  (e: "startTimeHandle", value: Date): void;
  (e: "endTimeHandle", value: Date): void;
}>();
//开始日期
const startDate = ref<Date | null>(null);
//结束日期
const endDate = ref<Date | null>(null);
//控制结束日期的状态
const endDateDisabled = ref(true);
//禁用开始日期的函数
const disabledStartDate = (time: Date) => {
  if (props.endDateTodaay)
    return time.getTime() < Date.now() - 1000 * 60 * 60 * 24;
};
//禁用结束时间得函数
const disabledEndDate = (time: Date) => {
  if (startDate.value)
    return time.getTime() < startDate.value?.getTime() + 1000 * 60 * 60 * 24;
};
const handleStartChange = (val: Date) => {
  console.log("开始时间", val);
  // startTime.value = val;
  if (val) {
    endDateDisabled.value = false;
  } else {
    endDateDisabled.value = true;
    endDate.value = null;
    emits("endTimeHandle", val);
  }
  emits("startTimeHandle", val);
};
const handleEndChange = (val: Date) => {
  emits("endTimeHandle", val);
};
</script>

<style scoped lang="scss">
.container {
  display: flex;
}
</style>
